<template>
  <div style="height: 100%;padding: 16px 24px;">
    <div style="height: 100%;display: flex;padding: 16px 24px;background: white;overflow: hidden;">
      <div class="list-page" style="width: 50%">
        <!-- 操作组 -->
        <div class="header-bar" style="z-index: 0">
<!--          <ButtonGroup class="float-left">-->
          <div class="float-left top-search">
            <Button icon="h-icon-plus" @click="add"><Lang zh="新增"/></Button>
            <Button :disabled="selects.length!=1" icon="h-icon-edit" @click="editFirst"><Lang zh="修改"/></Button>
            <Poptip :disabled="selects.length==0" class="h-btn" :content="$t('确定删除所选记录？','Are you sure to delete the selected record?')" @confirm="del">
              <Button icon="h-icon-trash"  :disabled="selects.length==0"><Lang zh="删除"/></Button>
            </Poptip>
          </div>

<!--          </ButtonGroup>-->
          <!-- 工具条 -->
          <div>
            <Search v-model="table.params.name"
                    show-search-button
                    :placeholder="$t('名称或编码','Name Or Code')"
                    @search="table.load()"
            >
              <i class="h-icon-search" />
            </Search>
<!--            <Input type="text" v-model="table.params.name" placeholder="名称或编码"/>-->
<!--            <Button icon="h-icon-search" @click="table.load()"></Button>-->
          </div>
        </div>
        <div class="list dict-sub"  style="margin-top: 0 !important;">
          <Table :datas="table.data" :loading="table.loading" @trClick="showSub" @trdblclick="edit" @select="selected" :get-tr-class="getTrClass" checkbox>
            <TableItem :title="$t('名称','Name')" prop="name">
              <!--            <template #default="{data}">-->
              <!--              <span class="link" @click="showSub(data)" style="display: inline-block;width: 100%">{{data.name}}</span>-->
              <!--            </template>-->
            </TableItem>
            <TableItem :title="$t('编码','Code')" prop="sn"></TableItem>
            <TableItem :title="$t('固定编码','IsFixed')" :width="80" align="center">
              <template #default="{data}">
                <Checkbox :checked="data.isFixed"/>
              </template>
            </TableItem>
          </Table>
        </div>
      </div>
      <div class="list-page" style="width: 50%">
        <!-- 操作组 -->
        <div class="header-bar" style="z-index: 0">
          <div class="float-left top-search">
            <Button icon="h-icon-plus" @click="sub_add" :disabled="subSn == null"><Lang zh="新增"/></Button>
            <Button :disabled="sub_selects.length!=1" icon="h-icon-edit" @click="sub_editFirst"><Lang zh="修改"/></Button>
            <Poptip :disabled="sub_selects.length==0" class="h-btn" :content="$t('确定删除所选记录？')" @confirm="sub_del">
              <Button icon="h-icon-trash" :disabled="sub_selects.length==0"><Lang zh="删除"/></Button>
            </Poptip>
          </div>
          <div style="margin-bottom: 16px">
            <Search v-model="table.params.name"
                    show-search-button
                    :placeholder="$t('名称或编码','Search Name Or Code')"
                    @search="sub.load()"
            >
              <i class="h-icon-search" />
            </Search>
          </div>

          <!--        <span style="line-height: 31px;">-->
          <!--          <h3>{{subText}}-{{subSn}}</h3>-->
          <!--        </span>-->
        </div>
        <div class="list" style="margin-top: 0 !important;">
          <Table :datas="sub.data" :loading="sub.loading" @trDblClick="edit" @select="sub_selected" checkbox selectWhenClickTr>
            <TableItem :title="$t('名称','Title')" prop="name"></TableItem>
            <TableItem :title="$t('编码','Code')" prop="sn"></TableItem>
            <TableItem :title="$t('排序','Rank')" prop="rank"></TableItem>
          </Table>
        </div>
      </div>
      <DictionaryDialog ref="dlg" :dict-type="dictType" @change="reload">
      </DictionaryDialog>
    </div>
  </div>

</template>
<script>
import {DataSource, ajax, util} from 'framework'
import DictionaryDialog from './dictionaryDialog.vue'
import {$t} from 'i18n'
let table = new DataSource('dictionary/list')
table.params.type='dict'
let sub=new DataSource('dictionary/list')

export default {
  name: "Dictionary",
  components: {DictionaryDialog},
  data() {
    return {
      showSearch: false,
      table: table,
      sub:sub,
      selects: [],
      sub_selects: [],
      subSn:null,
      subText:'',
      dictType:'dict'
    }
  }, mounted() {
    table.load()
  },
  methods: {
    $t:$t,
    getTrClass(v){

      return v.sn==this.subSn?'active':''
    },
    reload() {
      this.selects = []
      if(this.dictType=='dict'){
        table.load()
      }else{
        sub.load()
      }
    },
    search() {
      this.selects = []
      table.pagination.page = 1;
      table.load()
    },
    selected(v) {
      this.selects = v.map(it => util.fields(it, 'id'))
      return false
    },
    sub_selected(v) {
      this.sub_selects = v.map(it => util.fields(it, 'id'))
    },
    resetSerarch() {
      table.params = {}
      this.reload()
    },
    add() {
      this.dictType='dict'
      this.$nextTick(()=>{
        this.$refs.dlg.show()
      })
    },
    sub_add(){
      this.dictType=this.subSn
      this.$nextTick(()=>{
        this.$refs.dlg.show()
      })
    },
    editFirst() {
      if (this.selects.length == 0) {
        return;
      }
      this.dictType='dict'
      this.edit(this.selects[0])
    },
    sub_editFirst() {
      if (this.sub_selects.length == 0) {
        return;
      }
      this.dictType=this.subSn
      this.edit(this.sub_selects[0])
    },
    edit(v) {
      this.$refs.dlg.show(util.fields(v, 'id'))
    },
    del() {
      ajax.post('dictionary/delete', this.selects).then(r => {
        //this.reload()
        table.load()
      })
    },
    sub_del() {
      ajax.post('dictionary/delete', this.sub_selects).then(r => {
       // this.reload()
        sub.load()
      })
    },
    showSub(dt){
      if(this.subSn!=dt.sn){
        this.subText=dt.name
        this.subSn=dt.sn
        sub.params.type=dt.sn;
        sub.load()
      }

    }
  }
}
</script>
<style>
.dict-sub .active{
  background-color:var(--bc) !important;
}
.top-search>*{
  margin-bottom: 16px;
}
</style>
